import React,{useState,useEffect} from 'react'
import '../style/teacher.less'
import { useObserverHook } from '@/Utils/hook/index'
let timer = null;
export default function (props:any) {
    const [list,setList] = useState([])
    const [page,setPage] = useState({
        pageSize:5,
        pageNo:1
    })
    const [showLoading,setShowLoading] = useState(true)
    useEffect(()=>{
        setShowLoading(props.hiddenLoading)
    },[props.hiddenLoading])
    useEffect(()=>{
        let propsList=props.dataList
        setList(propsList)
    },[props.dataList])
    useEffect(()=>{
        props.search(page)
    },[page.pageNo])
    useObserverHook('#loading',(entries)=>{
        if(entries[0].isIntersecting == true){
            if(!timer){
                setPage({
                    ...page,
                    pageNo:page.pageNo+1
                })
            } else {
                
            }
            timer = setTimeout(()=>{
                timer = null
            },1000)
            
        }
    },null)
    function cleanTags(tags:any){
        let newArr = []
        for(let item of tags){
            let color = `rgb(${parseInt(Math.random()*255)},${parseInt(Math.random()*255)},${parseInt(Math.random()*255)}`
            let obj = {
                bgColor:color,
                value:item
            }
            newArr.push(obj)
        }
            return newArr.map((item,index)=>{
                return (
                <div 
                key={index}
                style={{maxWidth:"120px",background:item.bgColor+',.1)',float:'left',color:item.bgColor + ',1)',padding:'0px 10px',borderRadius:'10px',fontSize:'12px',marginRight:'4px'}}>
                    {item.value}
                </div>
                 )
            })
    }
  return (
    <div>
        {list.map(item =>{
           return( <div className="teacher" key={item.id}>
                <div className="teacher_info">
                    <span><img src={item.img}/></span>
                    <span className="info_message">
                        <h3>{item.username}</h3>
                        <rt>{item.position}</rt>
                    </span>
                </div>
                <p>{item.introduce}</p>
                <span>{cleanTags(item.tags)}</span>
             </div>)
        })}
       {showLoading?<div id="loading" className="under">Loading...</div>:<div className="under">已经到底了~</div>}
    </div>
  )

  
}
